---
title: Кнопки
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Список кнопок та груп кнопок, що використовуються у додатку.

## Кнопка

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип                   | Опис                                                                                                                                          |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | рядок                 | Необов'язкова назва класу для додаткового стилювання                                                                                          |
| Іконка      | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки.                                                        |
| заголовок   | рядок                 | Текстовий вміст кнопки.                                                                                                       |
| fullWidth   | булевий тип           | Визначає, чи повинна кнопка охоплювати всю ширину свого контейнера.                                                           |
| variant     | рядок                 | Візуальний стильовий варіант кнопки. Опції включають `primary`, `secondary` та `tertiary`.                    |
| розмір      | рядок                 | Розмір кнопки. Має два варіанти: `малий` і `середній`                                                         |
| позиція     | рядок                 | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `right`, i `middle`. |
| accent      | рядок                 | Акцентний колір кнопки. Опції включають: `default`, `blue` та `danger`.                       |
| скоро       | булевий тип           | Вказує, чи кнопка позначена як "незабаром" (як для майбутніх функцій).                                     |
| відключено  | булевий тип           | Визначає, чи кнопка відключена чи ні.                                                                                         |
| focus       | булевий тип           | Визначає, чи кнопка у фокусі.                                                                                                 |
| onClick     | функція               | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем.                                              |

</Tab>

</Tabs>

## Група кнопок

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Властивості | Тип                   | Опис                                                                                                                                        |
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | рядок                 | Необов'язкове ім'я для додаткового стилювання                                                                                               |
| Іконка      | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки.                                                      |
| заголовок   | рядок                 | Текстовий вміст кнопки.                                                                                                     |
| розмір      | рядок                 | Розмір кнопки. Має два варіанти: `малий` і `середній`                                                       |
| позиція     | рядок                 | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `middle`, `right`. |
| applyShadow | булевий тип           | Визначає, чи потрібно застосовувати тінь до кнопки.                                                                         |
| applyBlur   | булевий тип           | Визначає, чи потрібно застосовувати ефект розмиття до кнопки.                                                               |
| відключено  | булевий тип           | Визначає, чи кнопка відключена.                                                                                             |
| focus       | булевий тип           | Вказує, чи кнопка у фокусі.                                                                                                 |

</Tab>
</Tabs>

## Група плаваючих кнопок

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип       | Опис                                                                                  | За замовчуванням |
| ----------- | --------- | ------------------------------------------------------------------------------------- | ---------------- |
| розмір      | рядок     | Розмір кнопки. Має два варіанти: `малий` і `середній` | small            |
| children    | ReactNode | Масив елементів React, які представляють окремі кнопки у межах групи. |                  |

</Tab>

</Tabs>

## Плаваюча кнопка з іконкою

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип                   | Опис                                                                                                                                          |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | рядок                 | Необов'язкове ім'я для додаткового стилювання                                                                                                 |
| Іконка      | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки.                                                        |
| розмір      | рядок                 | Розмір кнопки. Має два варіанти: `малий` і `середній`                                                         |
| позиція     | рядок                 | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `right`, i `middle`. |
| applyShadow | булевий тип           | Визначає, чи потрібно застосовувати тінь до кнопки.                                                                           |
| applyBlur   | булевий тип           | Визначає, чи потрібно застосовувати ефект розмиття до кнопки.                                                                 |
| відключено  | булевий тип           | Визначає, чи кнопка відключена.                                                                                               |
| focus       | булевий тип           | Вказує, чи кнопка у фокусі.                                                                                                   |
| onClick     | функція               | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем.                                              |
| isActive    | булевий тип           | Визначає, чи кнопка у активному стані.                                                                                        |

</Tab>

</Tabs>

## Група плаваючих кнопок з іконками

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Властивості | Тип   | Опис                                                                                                                                                                                                                                                                                                      |
| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | рядок | Необов'язкове ім'я для додаткового стилювання                                                                                                                                                                                                                                                             |
| розмір      | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній`                                                                                                                                                                                                                     |
| iconButtons | масив | Масив об'єктів, кожен з яких представляє кнопку з іконкою в групі. Кожен об'єкт повинен містити компонент іконки, який ви хочете відобразити в кнопці, функцію, яку ви хочете викликати при натисканні користувача на кнопку, і вказати, чи повинна кнопка бути активною. |

</Tab>

</Tabs>

## Легка кнопка

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип               | Опис                                                                                                |
| ----------- | ----------------- | --------------------------------------------------------------------------------------------------- |
| className   | рядок             | Необов'язкове ім'я для додаткового стилювання                                                       |
| іконка      | `React.ReactNode` | Іконка, яку ви хочете відобразити в кнопці.                                         |
| заголовок   | рядок             | Текстовий вміст кнопки.                                                             |
| accent      | рядок             | Акцентний колір кнопки. Options include: `secondary` and `tertiary` |
| активний    | булевий тип       | Визначає, чи кнопка у активному стані.                                              |
| відключено  | булевий тип       | Визначає, чи кнопка відключена.                                                     |
| focus       | булевий тип       | Вказує, чи кнопка у фокусі.                                                         |
| onClick     | функція           | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем.    |

</Tab>

</Tabs>

## Легка кнопка з іконкою

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип                   | Опис                                                                                                |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------- |
| className   | рядок                 | Необов'язкове ім'я для додаткового стилювання                                                       |
| testId      | рядок                 | Тестовий ідентифікатор для кнопки.                                                  |
| Іконка      | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки.              |
| заголовок   | рядок                 | Текстовий вміст кнопки.                                                             |
| розмір      | рядок                 | Розмір кнопки. Має два варіанти: `малий` і `середній`               |
| accent      | рядок                 | Акцентний колір кнопки. Options include: `secondary` and `tertiary` |
| активний    | булевий тип           | Визначає, чи кнопка у активному стані.                                              |
| відключено  | булевий тип           | Визначає, чи кнопка відключена.                                                     |
| focus       | булевий тип           | Вказує, чи кнопка у фокусі.                                                         |
| onClick     | функція               | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем.    |

</Tab>

</Tabs>

## Головна кнопка

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості          | Тип                              | Опис                                                                                                      |
| -------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------- |
| заголовок            | рядок                            | Текстовий вміст кнопки.                                                                   |
| fullWidth            | булевий тип                      | Визначає, чи повинна кнопка охоплювати всю ширину свого контейнера.                       |
| variant              | рядок                            | Візуальний стильовий варіант кнопки. Options include `primary` and `secondary`            |
| скоро                | булевий тип                      | Вказує, чи кнопка позначена як "незабаром" (як для майбутніх функцій). |
| Іконка               | `React.ComponentType`            | Необов'язковий компонент іконки, який відображається всередині кнопки.                    |
| React `button` props | `React.ComponentProps<'button'>` | Підтримуються всі стандартні властивості кнопок HTML.                                     |

</Tab>

</Tabs>

## Округлена кнопка з іконкою

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості          | Тип                                             | Опис |
| -------------------- | ----------------------------------------------- | ---- |
| Іконка               | `React.ComponentType`                           |      |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |      |

</Tab>

</Tabs>
